<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=no">
    <meta name="format-detection" content="telphone=no, email=no"/>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<title>环保数据管家</title>
	<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
	<link rel="stylesheet" type="text/css" href="assets/css/iconfont/iconfont.css">
	<link rel="stylesheet" type="text/css" href="assets/css/app.css">
    <link rel="stylesheet" type="text/css" href="assets/css/map.css">
    <style type="text/css">
	.zhibiao-legend .zb-item {
	    background-color:#FFF!important;
	}
    .zhibiao-legend .disable{
        background-color: #efefef !important;
		border-color: #cccccc !important;
		color:#666666 !important;
    }
	.highcharts-legend {display:none;}
	body {max-width:100%;}
	.order-hd-title a {text-decoration:none;color:#333333;}
	.aqi-tables tbody td.date small {line-height:normal;}
	#month-select,.month-select{outline: none;border: 1px solid #23AE39;border-radius: 0.15rem;background: none;font-size: 0.4rem;line-height: 0.4rem;}
	.order-bd tfoot td{
		font-size: 0.5rem;
		text-align: left;
		color: #666666;
	}
	i.targetNum{color: #666666!important;font-size:0.5rem!important;}
	#sorttable tr td{
		padding: 8px 0;
		font-size: 0.6rem;
	}
    .aqi-map{
        position: relative;
        width: 100%;
        height: 20rem;
        background-color: #F9F9F9;
        margin-bottom: 2rem;
    }
	</style>
	<script type="text/javascript">
		/**
   * 对Date的扩展，将 Date 转化为指定格式的String
   * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符
   * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
   * eg:
   * (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
   * (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
   * (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
   * (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
   * (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
   */
  Date.prototype.pattern = function(fmt) {
    var o = {
      "M+": this.getMonth() + 1, //月份
      "d+": this.getDate(), //日
      "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时
      "H+": this.getHours(), //小时
      "m+": this.getMinutes(), //分
      "s+": this.getSeconds(), //秒
      "q+": Math.floor((this.getMonth() + 3) / 3), //季度
      "S": this.getMilliseconds() //毫秒
    };
    var week = {
      "0": "\u65e5",
      "1": "\u4e00",
      "2": "\u4e8c",
      "3": "\u4e09",
      "4": "\u56db",
      "5": "\u4e94",
      "6": "\u516d"
    };
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    if (/(E+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "星期" : "") : "") + week[this.getDay() + ""]);
    }
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      }
    }
    return fmt;
  }
	</script>
</head>
<body>
	<header>
		<span id="app-back" class="app-back"><i class="iconfont icon-left"></i></span>
		<span class="title">环保数据管家</span>
	</header>
	<!--<div class="map-btns flex-row" style="text-align: center;color: #333333;">
		<span class="active flex-row-item">监测点</span>
		<span id="redline" class="flex-row-item">生态红线</span>
	</div>-->
    <div class="order-hd">
        <div class="order-hd-title">空气质量优良率</div>
    </div>
    
    <div class="order-tables">
	    <div class="order-hd">
		    <div class="order-hd-title"><a href="aqiarea-list.html">各区PM2.5浓度</a></div>
			<div class="order-hd-select">
				<select id="month-select">				
				</select>                				
			</div>
		</div> 
        <div class="order-bd">
			<table>
				<thead class="thead">
					<tr class="firstRow">
						<td rowspan="2" colspan="1">区</td>
						<td valign="top" rowspan="1" colspan="4">PM2.5（μg/m3）</td>
					</tr>
					<tr id="order-month-warp">
						<td>2016年4月</td>
						<td>环比</td>
						<td>同比</td>
						<td>较2013年全年(目标)</td>
					</tr>
				</thead>
				<tbody id="sorttable">
				</tbody>
				<tfoot>
					<tr>
						<td colspan="5">注：标有*的区与2014年比较<span id="targetNum"></span></td>
					</tr>
				</tfoot>
			</table>		
		</div>		
	</div>
    <div class="order-hd">
        <div class="order-hd-title">环境地图</div>
    </div>
	<div class="aqi-map">
		<div id="allmap"></div>
	</div>
	<!--<div id="maptap" class="map-btns flex-row">
		<span data-idx="0" class="active map-btns-item flex-row-item">全国</span>
		<span data-idx="1" class="map-btns-item flex-row-item">长三角</span>
		<span data-idx="2" class="map-btns-item flex-row-item">南京</span>
	</div>-->
	<footer class="flex-row">
		<span id="app-main-link" class="flex-row-item"><i class="iconfont icon-weather"></i> 空气质量监测</span>
		<span id="app-middle-link" class="flex-row-item"><i class="iconfont icon-weather"></i> 空气质量分析</span>
		<span id="app-map-link" class="flex-row-item active"><i class="iconfont icon-iconfontweizhi"></i> 目标考核</span>
	</footer>
</body>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/touch.min.js"></script>
<script src="assets/echart/echarts.js"></script>
<script src="assets/echart/china.js"></script>
<script src="assets/maps/geocoordmap.js"></script>

<script>
    var host='http://58.213.141.220:8989/njhbindex';
	
	touch.on('#app-back', 'tap', function(ev){
	  location.href='index.html';
	});
	touch.on('#app-main-link', 'tap', function(ev){
	  location.href='index.html';
	});
    touch.on('#app-middle-link', 'tap', function(ev){
	  location.href='air-quality.html';
	});
	touch.on('#app-map-link', 'tap', function(ev){
	  location.href='newmap.html';
	});
    
	function getJSONData(url,callback){
      $.ajax({
          type: "get",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          url: url,  //这里是网址
          success: function (json) {
              callback(json)
          },
          timeout: 90*1000,
          error: function (XMLHttpRequest, textStatus, errorThrown) {
              console.error(url,textStatus+": "+errorThrown);
          }
      });
  }
  function RMS(s){
  	return s.replace('市','');//.replace('特别行政区','');
  }
  
  //生成12个月的下拉
	var currentMonth = (new Date()).pattern("M")-1,
	    currentYear = (new Date()).pattern("yyyy");
	if(currentMonth==0){
		currentMonth=12;
		currentYear-=1;
	}
	currentMonth=currentMonth<10?'0'+currentMonth:currentMonth;
    var monthArray = function (now) {
    var d = new Date(now.replace(/[^\d]/g, "/") + "/1");
    var result = [now];
    for(var i = 0; i < 11; i++) {
        d.setMonth(d.getMonth() - 1);
        var m = d.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        result.push(d.getFullYear() + "-" + m);
    }
    return result;
    }
     
	var tmpselect=''; 
    monthArray(currentYear+'-'+currentMonth).forEach(function(e,v){
        tmpselect+='<option value="'+e+'">'+e.replace(/-/g,'年')+'月</option>';
	});
	$('#month-select').html(tmpselect);
	// 月份切换
    $('#month-select').change(function(){
	    setSortTable($(this).val());
    });
    
    var areas={
			1:["南京开发区","2008","仙林大学城",-13,1],
			2:["栖霞区","2008,2007","仙林大学城,迈皋桥",-13,2],
			3:["建邺区","2009","奥体中心",-13,3],
			4:["高新开发区","2010","浦口",-13,4],
			5:["浦口区","2010","浦口",-13,5],
			6:["玄武区","2004","玄武湖",-13,6],
			7:["鼓楼区","2001,2006","草场门，山西路",-13,7],
			8:["秦淮区","2003","瑞金路",-13,8],
			9:["六合区","2022","雄州",-4,9],
			10:["江宁开发区","2018","将军大道",-13,10],
			11:["雨花台区","2002","中华门",-13,11],
			12:["南京化工园","2011","化工园",-13,12],
			13:["高淳区","2013","淳溪",-2,13],
			14:["江宁区","2016","彩虹桥",-4,14],
			15:["溧水区","2024","永阳",-2,15],
			16:["全市","2000","全市",-13,16]
		},areas2014={
			9:'*',
			13:'*',
			14:'*',
			15:'*',
		};
	getJSONData(host+'/data?act=areainfo',function(data){
		var trs=[];
		if(data.Error==null){
			data.Data.forEach(function(e,i){
				areas[e.id][0]=e.name;
				areas[e.id][1]=e.codes;
				areas[e.id][2]=e.areas;
				areas[e.id][3]=e.target;
				areas[e.id][4]=e.index;
				trs.push('<tr id="st-'+e.id+'"><td>'+e.name+(areas2014[e.id]!=undefined?'*':'')+'</td><td></td><td></td><td></td><td></td></tr>');
			});
		}
		$('#sorttable').html(trs.join(''));
		setSortTable(currentYear+'-'+currentMonth);
	});
	function setSortTable(month){
		var qstr=month.split('-');
		var curmstr=qstr[0]+'年'+qstr[1]+'月';
		$('#order-month-warp').find('td').eq(0).html(curmstr);
		getJSONData(host+'/data?act=areamonth&month='+month,function(data){
			if(data.Error==null){
				data.Data.forEach(function(e){
					var tds=$('#st-'+e.areaid).find('td')
						,g1=getGrowth(e.value,e.hbrate)
						,g2=getGrowth(e.value,e.tbrate);
					tds.eq(1).html(e.value);
					tds.eq(2).html(g1+'%').css('color',g1<0?'green':'orange');
					tds.eq(3).html(g2+'%').css('color',g2<0?'green':'orange');
				});
			}
		});
		getJSONData(host+'/data?act=areayear&year='+qstr[0],function(data){
			if(data.Error==null){
				data.Data.forEach(function(e){
					var pm25,jzpm25,id=e.areaid;
					if(parseInt(qstr[0])==2016){
						if(e.monthtype==200+parseInt(qstr[1])){
							pm25=e.pm25;
							jzpm25=e.jzpm25;
						}
					}else{
						pm25=e.pm25;
						jzpm25=e.jzpm25;
					}
					if(pm25!=undefined&&jzpm25!=undefined){
						var g3=getGrowth(pm25,jzpm25);
						$('#st-'+id).find('td').eq(4).html(g3+'%<i class="targetNum">('+areas[id][3]+'%)</i>').css('color',g3<areas[id][3]?'green':'orange');
					}
				});
			}
		});
	}
  
  var AllCitys=["海门","鄂尔多斯","招远","舟山","齐齐哈尔","盐城","赤峰","青岛","乳山","金昌","泉州","莱西","日照","胶南","南通","拉萨","云浮","梅州","文登","上海","攀枝花","威海","承德","厦门","汕尾","潮州","丹东","太仓","曲靖","烟台","福州","瓦房店","即墨","抚顺","玉溪","张家口","阳泉","莱州","湖州","汕头","昆山","宁波","湛江","揭阳","荣成","连云港","葫芦岛","常熟","东莞","河源","淮安","泰州","南宁","营口","惠州","江阴","蓬莱","韶关","嘉峪关","广州","延安","太原","清远","中山","昆明","寿光","盘锦","长治","深圳","珠海","宿迁","咸阳","铜川","平度","佛山","海口","江门","章丘","肇庆","大连","临汾","吴江","石嘴山","沈阳","苏州","茂名","嘉兴","长春","胶州","银川","张家港","三门峡","锦州","南昌","柳州","三亚","自贡","吉林","阳江","泸州","西宁","宜宾","呼和浩特","成都","大同","镇江","桂林","张家界","宜兴","北海","西安","金坛","东营","牡丹江","遵义","绍兴","扬州","常州","潍坊","重庆","台州","南京","滨州","贵阳","无锡","本溪","克拉玛依","渭南","马鞍山","宝鸡","焦作","句容","北京","徐州","衡水","包头","绵阳","乌鲁木齐","枣庄","杭州","淄博","鞍山","溧阳","库尔勒","安阳","开封","济南","德阳","温州","九江","邯郸","临安","兰州","沧州","临沂","南充","天津","富阳","泰安","诸暨","郑州","哈尔滨","聊城","芜湖","唐山","平顶山","邢台","德州","济宁","荆州","宜昌","义乌","丽水","洛阳","秦皇岛","株洲","石家庄","莱芜","常德","保定","湘潭","金华","岳阳","长沙","衢州","廊坊","菏泽","合肥","武汉","大庆","淮南","滁州","香港","澳门","台北","草场门","中华门","瑞金路","玄武湖","山西路","迈皋桥","仙林大学城","奥体中心","浦口","江宁彩虹桥","高淳淳溪","六合雄州","溧水永阳"];
    var SHCitys=['北京','上海','天津','重庆','哈尔滨','长春','沈阳','呼和浩特','石家庄','乌鲁木齐','兰州','西宁','西安','银川','郑州','济南','太原','合肥','武汉','长沙','南京','成都','贵阳','昆明','南宁','拉萨','杭州','南昌','广州','福州','海口','深圳','台北','香港','澳门'];
    var JSCitys  = ['盐城','南通','扬州','泰州','镇江','宿迁','苏州','淮安','常州','连云港','无锡','南京','徐州'];
    var CSJCitys = ['上海','杭州','宁波','绍兴','湖州','嘉兴','舟山','台州','合肥','马鞍山','金华','衢州','芜湖','滁州','淮南','丽水','温州','盐城','南通','扬州','泰州','镇江','宿迁','苏州','淮安','常州','连云港','无锡','南京','徐州'];
    var NJCitys=['南京','草场门','中华门','瑞金路','玄武湖','山西路','迈皋桥','仙林大学城','奥体中心','浦口','江宁彩虹桥','高淳淳溪','六合雄州','溧水永阳'];
    var colors=['#8F1531', '#CE222F', '#FA3F00','#FF9E00','#EED800','#29C500'];
    var AllAQIs={},AQISDATA=[],mapzoom=1;

function getGrowth(v1,v2){
		if(v1==''||v2=='') return '';
		return (((v1-v2)/v2)*100).toFixed(2);
	}
function getCitys(zoom){
  mapzoom=zoom;
	if(zoom<=7){
		return AllCitys
	}else{
		return [].concat(NJCitys,AllCitys)
	}
}
function getAQI(aqi){
	var num=parseInt(aqi);
	if(isNaN(num)) return null;
	return num
}

var dom = document.getElementById("allmap");
var myChart;
var app = {},option = null;

require.config({
    paths: {
        echarts: './assets/echart'
    }
});

require([
    'echarts',
    'echarts/config',
    'echarts/chart/map'
],
function (echarts,config) {
    myChart = echarts.init(dom);
    myChart.on(config.EVENT.MAP_ROAM,function(){
        console.log(arguments);
    });
    
    getData(function(data){
        showChart(data);
    });
});

function getData(callback){
    // 省内城市
    getJSONData(host+"/map",function(data){
        if(data.Error==null){
        data.Data.forEach(function(e){
            AllAQIs[RMS(e.name)]=parseInt(e.aqi);
        });
        }
        // 南京监测点
        getJSONData(host+"/data?act=aqiarean",function(data){
            if(data.Error==null){
                var d=data.Data;
                for(var i in d){
                    if(d[i].name=='市区'){
                        AllAQIs['南京']=d[i].aqi;
                    }else{
                        AllAQIs[d[i].name]=d[i].aqi;
                    }
                }
            }
            if(typeof callback=='function') callback(mapzoom);
        });
    });
};

function showChart(maplevel){
    var data=[],citys=getCitys(maplevel);
	citys.forEach(function(e){
        if(AllAQIs[e]){
            data.push({name:e,value:getAQI(AllAQIs[e])});
        }
	});
    var option = {
        backgroundColor: '#404a59',
        title: {
            show:false
        },
        tooltip: {
            trigger: 'item',
            formatter: function (v) {
                if(v[0]=='') return v[1];
                return v[1] + ' AQI: ' + v[2]+ '('+num2table(v[2]).note+')';
            },
            textStyle:{
                fontSize:10
            }
        },
        legend: {
            data:['全国'],
            show:false
        },
        toolbox: {
            show : false
        },
        dataRange: {
            min: 0,
            max: 300,
            calculable: true,
            color: colors,
            textStyle: {
                color: '#fff'
            },
            show:false
        },
        roamController: {
            show: true,
            x: 'right',
            mapTypeControl: {
                'china': true
            }
        },
        series: [
            {
                name:'全国',
                type:'map',
                mapType: 'china',
                hoverable: false,
                data:[],
                markPoint:{
                    symbol:'circle',
                    symbolSize: 5,
                    itemStyle: {
                        normal: {
                            borderWidth: 1,            // 标注边线线宽，单位px，默认为1
                            label: {
                                show: true,
                                textStyle:{
                                    align:'left',
                                    baseline:'middle',
                                    fontSize:8
                                },
                                formatter:function(v){
                                    // return '  '+v.name+': '+v.value
                                    return '  '//+v.name
                                }
                            }
                            },
                            emphasis: {
                            borderColor: '#1e90ff',
                            borderWidth: 5,
                            label: {
                                show: false
                            }
                            }
                        },
                    data:data
                },
                geoCoord: geoCoordMap,
                itemStyle: {
                    normal: {
                        areaStyle:{color: '#323c48'},
                        borderColor: '#111',
                        borderWidth:1
                    },
                    emphasis: {
                        areaStyle:{color: '#323c48'},
                        borderColor: '#111',
                        borderWidth:1
                    }
                },
                roam:'move',
                scaleLimit:{
                    min:5,
                    max:10
                }
            }
        ]
    };
    
    myChart.setOption(option);
    myChart.refresh();
}
function getCitys(zoom){
  __zoom=zoom;
	if(zoom<=7){
		return AllCitys
	}else{
		return [].concat(NJCitys,AllCitys)
	}
}
function num2color(num){
		var num=parseInt(num);
		var color='#23C700';
		if(num<50){
			color='#23C700';
		}else if(50<num&&num<=100){
			color='#ECD814';
		}else if(100<num&&num<=150){
			color='#FF9D01';
		}else if(150<num&&num<=200){
			color='#F83702';
		}else if(200<num&&num<=300){
			color='#CD162E';
		}else if(num>300){
			color='#8E0C30';
		}
		return color
	}	
	
	function num2table(num){
		var num=parseInt(num);
		var idx=0,note='';
		if(num<50){
			idx=0;
			note='优秀';
		}else if(50<=num&&num<=100){
			idx=1;
			note='良好';
		}else if(100<num&&num<=150){
			idx=2;
			note='轻度污染';
		}else if(150<num&&num<=200){
			idx=3;
			note='中度污染';
		}else if(200<num&&num<=300){
			idx=4;
			note='重度污染';
		}else if(num>300){
			idx=5;
			note='严重污染';
		}
		return {idx:idx,note:note}
	}
</script>
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan style='display:none;' id='cnzz_stat_icon_1259663969'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1259663969' type='text/javascript'%3E%3C/script%3E"));</script>
</html>